<template>
    <Tabs type="card">
        <TabPane label="交付统计">
            <Card style="min-height:360px" class="no-border-card">			
                <!--标题-->
                <p slot="title">
                    交付统计
                    <Button type="primary" class="btn-in-top-large" v-pmis="36" @click="exportTable">
                    导出清单
                    </Button>	
                </p>			
                <!--标题end-->
                
                <Row :gutter="16" style="margin-bottom:15px;">
                    <Col span="3">
                        <!--搜索条件-->
                        <Select @on-change="getData(1)" v-model="city" filterable placeholder="城市" clearable>
                            <Option v-for="item in cities" :value="item.name" :key="item.short_name">{{ item.name }}</Option>
                        </Select>
                        
                    </Col>

                    <Col span="3">
                        <Select @on-change="getData(1)" v-model="device_type" placeholder="设备类型" clearable>
                            <Option v-for="item in devices" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                        
                    </Col>

                    <!-- <Col span="3">
                        <Select @on-change="getData(1)" v-model="selectInstaller" placeholder="安装人员" clearable> 
                            <Option v-for="item in allInstallers" :value="item.name" :key="item.id">{{ item.name }}</Option>
                        </Select>
                        
                    </Col> -->

                    <Col span="4">
                        <Select @on-change="getData(1)" v-model="branch" filterable placeholder="选择门店" clearable>
                            <Option v-for="item in branches" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                    </Col>

                    <Col span="5">
                        <DatePicker 
                        @on-change="getData(1)"
                        style="width:100%;"
                        placement="bottom" 
                        v-model="timeRange" 
                        :options="options3"
                        type="daterange" 
                        placeholder="交付时间段" 
                        >
                        </DatePicker>
                        
                    </Col>

                    <Col span="6">
                        <Input v-model="keyword" placeholder="序列号/房源地址/下单人/安装师傅" icon="ios-search-strong" @on-enter="getData(1)" @on-click="getData(1)">
                        </Input>
                    </Col>
                </Row>

                <!--交付详情数据-->
                <Table stripe border :columns="columns" :data="datas" size="small" :loading="isLoadig"></Table>
                <!--交付详情数据end-->


                <!--分页-->
                <Page :total="total" 
                :page-size="size" 
                :current.sync="currentPage"
                show-elevator 
                @on-change="getData"
                show-total style="text-align:center"></Page>
                <!--分页end-->
            </Card>	
        </TabPane>
    </Tabs>
</template>	

<script>
import util from '@/libs/util'
import { http, api } from '@/libs/http'
import dataCenter from '@/libs/dataCenter'
import { DeviceTypeEnum } from '@/libs/const'

export default {
  data () {
    let now = Date.now()
    let dateBefore3 = now - 3 * 24 * 60 * 60 * 1000
    return {
      isLoadig: true,
      size: 20,
      total: 0,
      currentPage: 1,
      columns: [
        // 交付详情表头
        {
          title: '交付时间',
          align: 'center',
          minWidth: 120,
          render (createElement, obj) {
            return createElement(
              'span', // 标签名称
              new Date(obj.row.bill_time).Format('yyyy-MM-dd')
            )
          }
        },
        {
          title: '房源编号',
          key: 'home_name',
          align: 'center',
          minWidth: 90
        },
        {
          title: '房源地址',
          align: 'center',
          minWidth: 160,
          render (createElement, obj) {
            let concatedLocation = util.concatLocation(obj.row)

            return createElement(
              'span', // 标签名称
              concatedLocation
            )
          }
        },
        {
          title: '房间号',
          key: 'room_name',
          align: 'center',
          minWidth: 90,
          render (createElement, obj) {
            let result = obj.row.room_name
            if (result === 'default') {
              result = '公区'
            }
            return createElement(
              'span', // 标签名称
              result
            )
          }
        },
        {
          title: '设备类型',
          key: 'device_type',
          align: 'center',
          minWidth: 90,
          render (createElement, obj) {
            const device = DeviceTypeEnum.properties[obj.row.device_type]
            const result = device ? device.name : obj.row.device_type
            return createElement(
              'span', // 标签名称
              result
            )
          }
        },
        {
          title: '设备型号',
          key: 'model',
          align: 'center',
          minWidth: 90
        },
        {
          title: '序列号',
          key: 'sn',
          align: 'center',
          minWidth: 90
        },
        {
          title: '下单人',
          key: 'create_user',
          align: 'center',
          minWidth: 90,
          render (createElement, obj) {
            let result = obj.row.create_user
            if (result === 'client') {
              result = '商户安装'
            }
            return createElement(
              'span', // 标签名称
              result
            )
          }
        },
        {
          title: '安装师傅',
          align: 'center',
          minWidth: 90,
          render (createElement, obj) {
            return createElement(
              'span', // 标签名称
              obj.row.installer ? obj.row.installer.name || '-' : '-'
            )
          }
        }
      ],
      datas: [
        // 交付详情具体数据
      ],
      city: '',
      branch: null,
      device_type: 0,
      selectInstaller: '',
      timeRange: [new Date(dateBefore3), new Date(now)],
      keyword: '',
      devices: [
        {
          value: 1,
          label: '网关'
        },
        {
          value: 2,
          label: '门锁'
        },
        {
          value: 3,
          label: '电表'
        },
        {
          value: 4,
          label: '采集器'
        },
        {
          value: 5,
          label: '水表网关'
        },
        {
          value: 6,
          label: '冷水表'
        },
        {
          value: 7,
          label: '热水表'
        }
      ],
      allInstallers: [],
      cities: [],
      branches: [],
      options3: {
        disabledDate: date => {
          return date && date.valueOf() > Date.now()
        }
      }
    }
  },
  created () {
    this.getData(1) // 获取第一页全部数据
    this.getRegion() // 获取地区
    this.getBranches() // 获取门店
    // this.getInstallers() // 获取安装人员
  },
  methods: {
    getData (page) {
      if (page === 1) {
        this.currentPage = 1
      }
      if (this.timeRange[0] && this.timeRange[1] && this.timeRange[1] - this.timeRange[0] > 30 * 24 * 60 * 60 * 1000) {
        this.$Message.error('查询时间不能大于30天')
        return
      }
      let params = {
        limit: this.size,
        offset: this.size * (page - 1),
        branch_id: this.branch || null,
        city: this.city === '全部' || !this.city ? null : this.city,
        device_type: this.device_type || null,
        keyword: this.keyword || null,
        // installer_name: this.selectInstaller || null,
        start_time: this.timeRange[0] ? new Date(this.timeRange[0]).getTime() : null,
        end_time: this.timeRange[1] ? new Date(this.timeRange[1]).getTime() + 24 * 60 * 60 * 1000 : null
      }

      if (this.branch === 0) {
        params.branch_id = 0
      }

      http.request(this, api.device_deliver, null, params, res => {
        if (res && res.rows) {
          this.datas = res.rows
          this.total = res.count || 0
        }
        this.isLoadig = false
      })
    },
    getRegion () {
      dataCenter.getCities(this, null, res => {
        if (res) {
          this.cities = res
        }
      })
    },
    getInstallers () {
      let roleId = 14
      http.request(this, api.manager_list, [roleId], null, (res, err) => {
        if (res) {
          this.allInstallers = res.rows
        }
      })
    },
    getBranches () {
      dataCenter.getStores(this, res => {
        if (res) {
          this.branches = this.branches.concat(res)
        }
      })
    },
    exportTable () {
      if (this.timeRange[0] && this.timeRange[1] && this.timeRange[1] - this.timeRange[0] > 30 * 24 * 60 * 60 * 1000) {
        this.$Message.error('查询时间不能大于30天')
        return
      }
      let params = {
        branch_id: this.branch || null,
        city: this.city === '全部' || !this.city ? null : this.city,
        device_type: this.device_type || null,
        keyword: this.keyword || null,
        // installer_name: this.selectInstaller || null,
        start_time: this.timeRange[0] ? new Date(this.timeRange[0]).getTime() : null,
        end_time: this.timeRange[1] ? new Date(this.timeRange[1]).getTime() + 24 * 60 * 60 * 1000 : null
      }

      if (this.branch === 0) {
        params.branch_id = 0
      }
      // 导出报表
      http.exportTable(this, api.device_deliver_export, null, params)
    }
  }
}
</script>

<style lang="less">
.export-link {
    color: #fff;
    text-decoration: none;
}
.export-link:hover {
    color: #fff;
}
</style>